<template>
  <div>
    <div class="header">
      <div class="header_img"><div @click="back()" class="IMG"></div></div>
      <div class="title">企业权益</div>
      <div class="save"></div>
    </div>

    <div class="base_content">
        <div class="top">
          <img src="../../assets/images/cylogo@2x.png" alt="logo" class="cylogo"/>
          <div class="base_content_right">
              <p class="cyname">上海雨夏软件科技有限公司</p>
              <div class="right_content">
                  <div class="level">
                      <img src="../../assets/images/level@2x.png" alt="等级" class="level1"/>
                      <p>L0</p>
                  </div>
                  <div class="level">
                  <img src="../../assets/images/integral@2x.png" alt="积分" class="integral"/>
                  <p>0积分</p>
                </div>
                  <div class="level">
                  <img src="../../assets/images/coupon@2x.png" alt="现金劵" class="coupon"/>
                  <p>0张现金劵</p>
                </div>
              </div>
          </div>
        </div>
    </div>
    <div class="bottom">
      <div class="base_content_bottom zx">
        <img src="../../assets/images/car@2x.png" alt="直通车">
        <p>每月两次免费<br/>雇佣直通车</p>
      </div>
      <div class="base_content_bottom zx">
        <img src="../../assets/images/xjj@2x.png" alt="直通车">
        <p>每年可以获赠<br/>1000元现金劵</p>
      </div>
      <div class="base_content_bottom">
        <img src="../../assets/images/plan@2x.png" alt="直通车">
        <p>免费成功案例<br/>推广计划</p>
      </div>
    </div>
    <div class="base_tips">
        <p>每年根据上一年的积分判定等级，积分有一年时效性，每年1月1日，上一年的积分自动折半，算作下一年的初始积分。</p>
        <p class="ts">默认用户的初始等级为L0积分>5000升级为L1级，享受企业福利：<br/>
        </p>
        <p>
          1、每月可免费使用2次雇佣直通车（5位档）；<br/>
          2、每年可以获赠1000元现金劵，有效期一年；<br/>
          3、完成的项目获得在客栈多平台免费推广的机会。
        </p>
    </div>

  </div>
</template>

<script>
    export default {
        name: "interests",
      data(){
          return{
          }
      },
      methods: {
        back() {
          window.webkit.messageHandlers.interests.postMessage({});
        },
      }
    }
</script>

<style scoped>
  .header {
    box-sizing: border-box;
    position: relative;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }

  .header_img {
    flex:1;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 34px;
    color: #ffff;
  }

  .save {
    flex: 1;
  }
  .base_content{
    height: auto;
    background: #fff;
    padding: 0 30px 0 30px;
  }
  .base_content .top{
    width: 690px;
    height: 88px;
    display: flex;
    padding: 30px 0;
    border-bottom: 1px dashed #efefef;
    margin: 0;
  }
  .base_content .top .cylogo{
    width:88px;
    height:88px;
    border-radius: 5px;
  }
  .base_content .top .base_content_right{
    flex: 1;
    margin-left: 20px;
    margin-top: 7px;
  }
  .base_content .top .base_content_right .cyname{
    font-size: 28px;
    font-weight: bold;
    color:rgba(43,43,43,1);
  }
  .base_content .top .base_content_right .right_content{
    margin-top: 6px;
  }
  .base_content .top .base_content_right .right_content .level{
    display: inline-block;
    margin-right: 30px;
  }
  .base_content .top .base_content_right .right_content .level .level1{
    height: 16px;
    width: 20px;
  }
  .base_content .top .base_content_right .right_content .level .integral{
    height: 16px;
    width: 15px;
  }
  .base_content .top .base_content_right .right_content .level .coupon{
    height: 16px;
    width: 22px;
  }
  .base_content .top .base_content_right .right_content .level p{
    display: inline-block;
    font-size: 22px;
    color:rgba(252,148,39,1);
  }
  .bottom{
    display: flex;
    background: #fff;
  }
  .bottom .base_content_bottom{
    margin: 30px 0;
    flex: 1;
    text-align: center;
  }
  .bottom .zx{
    border-right: 1px solid #efefef;
  }
  .bottom .base_content_bottom img{
    width: 90px;
    height: 90px;
  }
  .bottom .base_content_bottom p{
    margin-top: 8px;
    font-size: 22px;
    font-weight: 400;
    color:rgba(43,43,43,1);
  }
  .base_tips{
    padding: 0 30px 0 30px;
    margin-top: 30px;
  }
  .base_tips p{
    font-size: 22px;
    color:rgba(153,153,153,1);
    margin-bottom: 40px;
  }
  .base_tips .ts{
    margin-bottom: 10px;
  }
</style>
